import React, { Component } from 'react';
class DemoForm extends Component {
    constructor() {
        super();
        this.state={
            title:'受控组件',
            title2:'非受控组件'
        }
    }
    // 创建ref对象
    titleRef=React.createRef()

    updateTitle=(e)=>{
        this.setState({
            title:e.target.value
        })
    }

    getTitle=(e)=>{
        // 阻止浏览器默认行为
        e.preventDefault()
    }
    render() { 
        return ( <>
            <form onSubmit={this.getTitle}>
                <h2>3.受控与非受控组件</h2>

                <div>
                    title:{this.state.title}
                    <input type="text" value={this.state.title}  readOnly/>
                </div>
                <h2>非受控组件</h2>
                title2:{this.state.title2}
                <input type="text" ref={this.titleRef} />
                <button >获取input的内容</button>
            </form>
        </>);
    }
}
 
export default DemoForm;